<template>
    <div class="content">
        <div class="main">
            <div class="main-box">
                <div class="bjcl">车辆充电高峰时间</div>
                <div id="clcd" style="width: 630px; height: 130px" class="echart"></div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";
export default {
    name: 'App',
    data() {
        return {}
    },
    mounted: function () {
        this.$nextTick(function () {
            this.getPie()
        })
    },
    methods: {
        getPie() {
            // 绘制图表
            var myChart = echarts.init(document.getElementById('clcd'))
            // 指定图表的配置项和数据
           var option = {
        grid: {
          top: '30%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true   // 距离包含坐标轴上的文字
        },
          xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['0时','1时','2时','3时','4时','5时','6时','7时','8时','9时','10时','11时','12时','13时','14时','15时','16时','17时','18时','19时','20时','21时','22时','23时'],
          axisLabel: {
            rotate: 30 ,
            textStyle:{
              color: '#ccc',
              fontSize:'8'
            },
            lineStyle:{
              color:'#2c3459',
            }
          }
        },
        yAxis: {
          type: 'value',
          data:['0','200','400','800','1000'],
          max:1000,
          axisLabel: {
            textStyle: {
              color: '#ccc',
              fontSize:'10',
            }
          },
          axisLine: {
            lineStyle:{
              color:'rgba(160,160,160,0.3)',
            }
          },
          splitLine: {
            lineStyle:{
              color:'rgba(160,160,160,0.3)',
            }
          }
        },
        series: [
          {
            data: [700, 350, 360, 800, 500, 830, 760,520, 552, 901, 934, 910, 190, 120,820, 932, 901, 934, 790, 330, 320,820, 932, 901],
            type: 'line',
            smooth: true,
            areaStyle: {
              normal: {type: 'default',
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
                  offset: 0,
                  color: '#25f3e6'
                }, {
                  offset: 1,
                  color: '#0089ff'
                }], false)
              }
            },
            symbol: 'circle', 
            symbolSize:7,
            itemStyle : {
            normal : {
              color:'#94CFCB', 
              lineStyle:{
              color:'#94CFCB',
              width:2,
            }
      }
      },
          }
        ],
        tooltip : {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        }
      };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        }
    }

}


</script>
<style scoped lang="less">
.content {
    position: relative;
    box-sizing: border-box;
    background-color: rgba(15, 32, 95, 0.7);
}

.main-box {
    position: absolute;
    height: 125px;
    width: calc(100%-4px);
    background-image:
        url("../assets/picture/bj-1.png"),
        url("../assets/picture/bj-2.png"),
        url("../assets/picture/bj-4.png"),
        url("../assets/picture/bj-3.png");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, bottom left, bottom right;
    z-index: 1;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: -2px;
}

.main {
    height: 125px;
    width: 100%;
    border: 1px solid #1723b0;
}

.echart {
    position: absolute;
    top: 0px;
    left: 0px;
}
.bjcl{
     position: absolute;
    top: 5px;
    left: 9px;
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
}
</style>